<template>
	<view class="container">
		<view class="item-list">
			<view class="item" v-for="(item, index) in items" :key="index">
				<text>真实姓名:{{ item.communityAdminName }}</text>
				<text>手机号:{{ item.communityAdminTelephone }}</text>
				<view class="avtive">
					<text>状态:{{ item.isActiveStr }}</text>
					<switch :checked="item.isActive" @change="change(item, index)" color="#28A745" />
				</view>
			</view>
		</view>
		<view class="footer"><view class="btn" @tap="goToAdd">添加</view></view>
		
		<mescroll-empty v-if="items.length==0"></mescroll-empty>
	</view>
</template>

<script>
import MescrollEmpty from 'mescroll-uni/components/mescroll-empty.vue';
export default {
	components: { MescrollEmpty },
	data() {
		return {
			items: [],
			communityId: ''
		};
	},
	onLoad(e) {
		this.communityId = e.CommunityId;
	},
	onShow() {
		this.$http
			.request({
				url: 'api/Community/GetManagerList',
				data: {
					CommunityId: this.communityId
				}
			})
			.then(res => {
				// #ifdef H5
				this.$wechat.hideMenu();
				// #endif
				this.items = res;
			});
	},
	methods: {
		change(item, index) {
			var that = this;
			uni.showModal({
				content: item.isActive ? '是否要停用该用户？' : '是否要启用该用户？',
				showCancel: true,
				success(res) {
					if (res.confirm) {
						that.$http
							.request({
								url: 'api/Community/UpdateManagerActive',
								method: 'POST',
								data: {
									Id: item.id
								}
							})
							.then(result => {
								that.items[index].isActive = !that.items[index].isActive;
								that.items[index].isActiveStr = that.items[index].isActive ? '启用' : '停用';
							});
					}
				}
			});
		},
		goToAdd() {
			uni.navigateTo({
				url: 'add?communityId=' + this.communityId
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.item-list {
	margin-bottom: 100rpx;
}
.item {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 0 auto;
	background: #ffffff;
	padding: 20rpx;
	border-radius: 15rpx;
	line-height: 50rpx;
	margin-bottom: 20rpx;
	border-bottom: 1px solid $uni-color-divider;
	.avtive {
		display: flex;
		justify-content: space-between;
	}
}
.footer {
	position: fixed;
	bottom: 0;
	height: 80rpx;
	width: 100%;
	.btn {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 40rpx;
		background: $uni-color-main-dark;
	}
}
</style>
